<template>
  <el-row>
    <el-row>
      <navigator></navigator>
    </el-row>
    <el-row>
      <h1>Hello World智能合约使用示例</h1>
      <el-form style="text-align: center">
        <el-form-item>
          <el-row>
            <el-col :span="2">
              合约名称：
            </el-col>
            <el-col :span="6">
              <el-input type="primary" v-model="contract_name"></el-input>
            </el-col>
            <el-col :span="2">
              合约地址：
            </el-col>
            <el-col :span="6">
              <el-input type="primary" v-model="contract_address"></el-input>
            </el-col>
          </el-row>
          <el-row style="margin-top: 20px">
            <el-col :span="2">
              合约abi：
            </el-col>
            <el-col :span="6">
              <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 8}" v-model="contract_abi"></el-input>
            </el-col>
            <el-col :offset="2" :span="2">
              <el-button type="primary" @click="set_contract">设置合约信息</el-button>
            </el-col>
          </el-row>
        </el-form-item>
        <el-divider></el-divider>
        <el-form-item label="获取Name信息:">
          <el-row :gutter="20">
            <el-col :span="2">
              <el-button type="primary" @click="get_helloworld">获取</el-button>
            </el-col>
            <el-col :span="4">
              {{get_helloworld_name}}
            </el-col>

          </el-row>
        </el-form-item>
        <el-form-item label="设置Name信息:">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-input type="primary" v-model="set_helloworld_name"></el-input>
            </el-col>
            <el-col :span="4">
              <el-button type="primary" @click="set_helloworld">设置</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>

    </el-row>

  </el-row>

</template>

<script>
import Navigator from "@/components/Navigator";
// import jsonView from "_vue-json-views@1.3.0@vue-json-views";
export default {
  name: "HelloWorld",
  components: {
    Navigator,
    // jsonView
  },
  data() {
    return {
      get_helloworld_name: "",
      set_helloworld_name: "",
      contract_name:"",
      contract_address:"",
      contract_abi:""
    }
  },
  methods: {
    get_helloworld() {
      this.axios.get(`contract/helloworld/get`).then((response) => {
        console.log(response)
        this.get_helloworld_name = response.data;

      }).catch((response) => {
        console.log(response)
      })
    },
    set_helloworld() {
      this.axios.get(`contract/helloworld/set?value=${this.set_helloworld_name}`).then((response) => {
        console.log(response);
        alert("设置成功！");
      })
    },
    set_contract() {
      let data = {
        name: this.contract_name,
        address: this.contract_address,
        abi: this.contract_abi
      }
      this.axios.post(`contract/set`, data).then((response) => {
        console.log(response);
        if (response.data.code == 200) {
          alert("设置成功")
        }else {
          alert("存在问题")
        }

      })
    }
  }
}
</script>

<style scoped>

</style>